<script setup>
import { reactive, ref, computed } from 'vue'
import dayjs from 'dayjs'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'

const disabledDate = (time) => {
    return time.getTime() > Date.now()
}

const formValue = ref({
    startDate: "",
    endDate: ""
})

const resetForm = () => {
    // Object.keys() 用于获取对象的所有键名
    Object.keys(formValue.value).forEach(key => {
        formValue.value[key] = ''; // 将每个键的值重置为空字符串
    });
};
// 提交表单的方法
const onSubmit = () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })

    // 格式化日期
    const formattedStartDate = formValue.value.startDate
        ? dayjs(formValue.value.startDate).format('YYYY-MM-DD')
        : '';
    const formattedEndDate = formValue.value.endDate
        ? dayjs(formValue.value.endDate).format('YYYY-MM-DD')
        : '';

    const body = {
        "startTime": formattedStartDate,
        "endTime": formattedEndDate
    }

    let fileName = formattedStartDate.substring(5, 7);
    console.log(fileName);
    let monthNumber = parseInt(fileName, 10);

    if (monthNumber < 10) {
        // 如果月份小于10，则去除掉零
        monthNumber = monthNumber.toString(); // 将月份转换为字符串
        monthNumber = parseInt(monthNumber, 10); // 去除前导零
    }
    console.log(monthNumber);
    axios.post("download/", body, { responseType: 'blob' })
        .then((res) => {
            resetForm()
            loading.close()
            // 使用 Blob 创建下载 URL
            const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
            const link = document.createElement('a');
            link.href = downloadUrl;
            link.setAttribute('download', `${monthNumber}月日常BUG.xls`); // 设置下载文件名
            link.style.display = 'none'; // 隐藏链接
            document.body.appendChild(link); // 将链接添加到文档中
            link.click(); // 模拟点击
            document.body.removeChild(link); // 移除链接
            window.URL.revokeObjectURL(downloadUrl); // 清理URL对象

            ElMessage({
                message: "下载成功~~~",
                type: 'success',
                showClose: true,
            })
        })
        .catch((error) => {
            loading.close()
            ElMessage({
                message: '下载失败，请重试看看',
                type: 'error',
            })
            console.error(error);
        });
}

</script>


<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span style="color: #ffffff;">591日常BUG下载</span>
            </div>
        </template>
        <el-row justify="center">
            <el-col :span="8" offset="8"
                style="border: 2px solid #e8e8e8; height: 360px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">
                <div class="grid-content ep-bg-purple" />
                <el-form :model="formValue">
                    <el-form-item label="请选择开始时间:">
                        <el-date-picker v-model="formValue.startDate" type="date" placeholder="点击选择开始日期"
                            :disabled-date="disabledDate" :shortcuts="shortcuts" :size="size" />
                    </el-form-item>

                    <el-form-item label="请选择结束时间:">
                        <el-date-picker v-model="formValue.endDate" type="date" placeholder="点击选择结束日期"
                            :disabled-date="disabledDate" :shortcuts="shortcuts" :size="size" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="onSubmit">下载日常BUG</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>
<style scoped>
.el-col {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>